$(function(){

    //console.log($("#id1").html(""));
    //console.log($("#id1").text("<strong>Hello World！<strong>"));
    
    $("#id3").click(function(){
        //$("#id2").val("abc")
        //console.log($("#id2").val());

        $("#id2").attr("value","XYZ");
        console.log($("#id2").attr("value"));
        console.log($("#id2").attr("type"));
        console.log($("#id2").attr("abc"));
    });
    
    //加属性
    //$("#id4").attr("target","_blank");
    //改属性
    //$("#id4").attr("href","2.html");
    //删属性[设置成了默认值]
    //$("#id4").attr("target","");

    //$("#id5").attr("href","2.html").attr("target","_blank");
    $("#id5").attr({"href":"2.html","target":"_blank"})
    $("#id5").removeAttr("target");

    $("#id6").click(function(){
        var $p = $("<p></p>");
        $p.text("新创建的段落");
        $p.attr("class","sty1");
        console.log($p);
    });

    $("#id7").click(function(){
        alert("!");
    });

    $("#id8").click(function(){
        var $div7 = $("#id7").clone(false);
        $("#parent").append($div7);
    });

    $("#id9").click(function(){
        //子元素
        var zi = $("<li>第零项</li>")
        //父元素
        var fu = $("ul");
        //里面的前面添加
        //fu.prepend(zi);
        zi.prependTo(fu);
    });

    $("#id10").click(function(){
        //子元素
        var zi = $("<li>第四项</li>")
        //父元素
        var fu = $("ul");
        //里面的后面添加
        //fu.append(zi);
        zi.appendTo(fu);
    });

    $("#id11").click(function(){
        //增加元素
        var zj = $("<li>第X项</li>")
        //参照元素
        var cz = $("ul");
        //参照节点的前面添加
        //cz.before(zj);
        zj.insertBefore(cz);
    });

    $("#id12").click(function(){
        //增加元素
        var zj = $("<li>第Y项</li>")
        //参照元素
        var cz = $("ul");
        //参照节点的后面添加
        //cz.after(zj);
        zj.insertAfter(cz);
    });

    $("#id13").click(function(){
        if(confirm("确认删除吗？")){
            //获取待删节点
            $("ul li:last").remove();
        }
    })

    $("#id14").click(function(){
        //创建新节点
        var $new = $("<li id='idY'>新节点</li>")
        //老节点
        var $old = $("ul li:eq(1)");
        //替换
        //$old.replaceWith($new)
        $new.replaceAll($old)
    })

    $("#id15").click(function(){
        console.log($("#idX").parent().html());
    });

    $("#id16").click(function(){
        var $arr = $("ul").children("#idX");
        
        // for(var i=0; i<$arr.length; i++){
        //     console.log($arr[i]);
        //}

        $arr.each(function(index,element){
            //console.log(index,element)
            $("#id17").append($(element).clone(true))
        });
    });

    $("#id18").click(function(){
        console.log($("#idX").next().text());
        console.log($("#idX").prev().text());
        console.log($("#idX").siblings());
    });

    $("#id19").click(function(){
        $("ul li").css("background-color","lightblue").first().css("color","white").end().eq(1).css("color","silver");
    })

    $("#id21").click(function(){
        // console.log($("#id20").height());
        // console.log($("#id20").width());
        $("#id20").height("300px");
        $("#id20").width("300px");
    });

    $("#id22").click(function(){
        console.log($("#id20").offset().left);
        console.log($("#id20").offset().top);
        console.log($("#id23").offset().top);

        console.log($("#id23").offsetParent());
        console.log($("#id23").offsetParent().offset().top);

        console.log($("#id23").position().top);
    });

    $("#id24").click(function(){
        $(window).scrollTop(100);
        $(window).scrollLeft(100);
    });
})
//console.log(document.getElementById("id1").innerText);